<template>
  <div>
    <el-select v-model="modelType" class="width240" size="small" @change="changeType">
      <el-option
        v-for="item in typeOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value" />
    </el-select>
  </div>
</template>
<script>
import { showModal } from '@/utils/message';
import { basicComponents } from '../config';
export default {
  name: 'SwitchType',
  model: {
    prop: 'selectWidget',
    event: 'changeData'
  },
  props: {
    selectWidget: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      modelType: ''
    };
  },
  computed: {
    typeOptions() {
      const type = this.selectWidget.type;
      const arr = [
        { label: '单行输入框', value: 'input' },
        { label: '多行输入框', value: 'textarea' },
        { label: '链接', value: 'link' }
      ];
      return arr.filter(i => i.value !== type);
    }
  },
  methods: {
    changeType(type) {
      showModal(`组件切换后字段配置将发生改变 <br/> 请谨慎操作`, '', { dangerouslyUseHTMLString: true }).then(_ => {
        this.selectWidget.type = type;
        const curTypeConfig = basicComponents.find(i => i.type === type);
        if (curTypeConfig) {
          Object.keys(curTypeConfig.options).forEach(key => {
            // 如果当前组件没有目标组件的属性，需要赋予初值
            if (!Object.hasOwnProperty.call(this.selectWidget.options, key)) {
              this.$set(this.selectWidget.options, key, curTypeConfig.options[key]);
            }
          });
        }
      });
      this.modelType = '';
    }
  }
};
</script>
<style scoped lang="scss">
.width240 {
  width: 240px;
  &::v-deep {
    .el-input__inner {
      width: 240px;
    }
  }
}
</style>
